<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>银行卡管理</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			* {
				border: none;
			}
			
			.mui-table-cell {
				border: none;
				width: 100%;
				display: block;
			}
			
			ul {
				width: 90%;
				margin-left: 5%;
				border-radius: 10px;
				border: none;
			}
			
			li {
				height: 100px;
				border-radius: 10px;
			}

			.mui-table-view:before {
				background-color: transparent;
			}

			.mui-table-view:after {
				background-color: transparent;
			}

			.mui-btn-red {
				border-bottom-right-radius: 10px;
				border-top-right-radius: 10px;
			}

		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-pull-left"></a>
			<h1 class="mui-title">银行卡管理</h1>
		</header>
		<div class="mui-content">
			<div id="OA_task_2" >
			</div>
			<button type="button" id="confirm-btn" class="mui-btn confirm-btn" style="width: 90%;height:40px;font-size: 16px;margin-left: 5%;margin-top: 20px;">添加银行卡</button>
		</div>

		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript">
            mui.init({
                swipeBack: true //启用右滑关闭功能
            });
			mui(document.body).on('tap', '.confirm-btn', function() {
				window.location.href = 'addCard.html';
			});
			mui.ready(function() {
				$.ajax({
					url: "/thmlfApi/avs/pay/depositcardlist"+"?_d="+Date.parse(new Date()),
					type: "post",
					data: {
						payerId: sessionStorage.getItem("payerId")
					},
					dataType: "json",
					success: function(r) {
						if(r.code == 200) {
						    if (localStorage.getItem('isFrist') != '1' && r.result.length > 0){
                                mui.toast('提示：左滑银行卡可设置结算卡/删除结算卡');
                                localStorage.setItem('isFrist','1');
							}
							$.each(r.result, function(index, data) {
								var cardType = data.cardType == 'X' ? "信用卡" : "借记卡";
								var de = data.isDeposit;
								var defa = data.isDeposit == 1 ? '<span class="mui-badge mui-badge-success">默认结算卡</span>' : '';
								var imgSrc = selectImage(data.bankName);
								var item = '<ul class="mui-table-view" style="margin-top: 10px">' +
									'<li class="mui-table-view-cell" cash-bind-id="' + data.cashBindId + '">' +
									'<div class="mui-slider-right mui-disabled">' +
									'<a class="mui-btn mui-btn-yellow" cash_bind_id="'+data.cashBindId+'">设为结算卡</a>' +
									'<a class="mui-btn mui-btn-red" cash-bind-id="'+data.cashBindId+'" de="'+de+'" las="' + data.lastFourNum + '">删除</a>' +
									'</div>' +
									'<div class="mui-slider-handle">' +
									'<div class="mui-table-cell">' +
									'<div class="" style="float: left;width: 50%;">' +
									'<img src="img/'+imgSrc+'@2x.png" style="width: 40px;height: 40px;float: left;" />' +
									'<div style="float: left;margin-left: 5px;">' +
                                    '<p style="font-size: 15px;">' + data.bankName + '</p>' +
									'<p>' + cardType + '</p>' +
									'<p>' + defa + '</p>'+
									'</div>' +
									'</div>' +
									'<p style="position: absolute;top: 60px;right: 10px;">**** **** **** ' + data.lastFourNum + '</p>' +
									'<div style="float: right;height: 88px;width: 50%;background-image: url(img/'+imgSrc+'bj@2x.png); background-size: contain; background-repeat: no-repeat;background-position: right;">' +
									'</div>' +
									'</div>' +
									'</div>' +
									'</li>' +
									'</ul>';
								$('#OA_task_2').append(item);
							});
                            $('.mui-btn-yellow').click(function() {
                                var bindId = $(this).attr('cash_bind_id');
                                var params ={
                                    "cash_bind_id":bindId,
                                    "payerId":sessionStorage.getItem('payerId')
                                };
                                $.ajax({
                                    url:"/thmlfApi/avs/pay/setcashcard?cashBindId="+bindId+"&payerId="+sessionStorage.getItem('payerId')+"&_d="+Date.parse(new Date()),
                                    type: "GET",
//                                    data: JSON.stringify(params),
                                    dataType: 'json',
                                    contentType: "application/json;charset=utf-8",
                                    success: function(r) {
                                        if(r.code==200){
                                            window.location.reload();
                                        }else{
                                            mui.alert(r.message);
                                        }
                                    }});
                            });
                            $('.mui-btn-red').click(function() {
                                var bindId = $(this).attr('cash-bind-id');
                                var isSettle=$(this).attr("de");
                                if (isSettle == 1){
                                    mui.alert("请先解除结算卡绑定");
                                    return;
                                }
                                mui.confirm("您确定要删除尾号为" + $(this).attr('las') + "的银行卡吗？", "提示", ["确定", "取消"], function (e) {
                                    if (e.index == 0){
                                        $.ajax({
                                            url: "/thmlfApi/avs/pay/deldepositcard?payerId=" + sessionStorage.getItem("payerId") + "&cashBindId=" + bindId+"&_d="+Date.parse(new Date()),
                                            type: "GET",
                                            cache: false,
                                            success: function (r) {
                                                if (r.code == 200) {
                                                    window.location.reload();
                                                } else {
                                                    mui.alert(r.message);
                                                }
                                            },
                                            error: function () {
                                                mui.alert("请求失败，请重试");
                                            }
                                        });
									}
                                });
                            });
						} else
							mui.alert(r.message);
					},
					error: function(e) {
						console.error("request error:", e);
						mui.alert("获取结算卡信息失败");
					}
				});
				mui('li').on('slideleft', '.mui-table-view-cell', function(event) {
				});
			});
			
			function selectImage(name) {
				if (name.indexOf("工商") != -1){
				    return 'gsyh';
				}else if (name.indexOf("兴业") != -1){
                    return 'xyyh';
                }else if (name.indexOf("民生") != -1){
                    return 'msyh';
                }else if (name.indexOf("平安") != -1){
                    return 'payh';
                }else if (name.indexOf("广发") != -1){
                    return 'gfyh';
                }else if (name.indexOf("北京") != -1){
                    return 'bjyh';
                }else if (name.indexOf("华夏") != -1){
                    return 'hxyh';
                }else if (name.indexOf("浦发") != -1){
                    return 'pfyh';
                }else if (name.indexOf("上海") != -1){
                    return 'shyh';
                }else if (name.indexOf("渤海") != -1){
                    return 'bhyh';
                }else if (name.indexOf("江苏") != -1){
                    return 'jsyh';
                }else if (name.indexOf("农业") != -1){
                    return 'nyyh';
                }else if (name.indexOf("中国") != -1){
                    return 'zgyh';
                }else if (name.indexOf("建设") != -1){
                    return 'jsyh';
                }else if (name.indexOf("招商") != -1){
                    return 'zsyh';
                }else if (name.indexOf("邮政") != -1){
                    return 'yzyh';
                }else if (name.indexOf("中信") != -1){
                    return 'zxyh';
                }else if (name.indexOf("光大") != -1){
                    return 'gdyh';
                }else if (name.indexOf("交通") != -1){
                    return 'jtyh';
                }else
                    return '';
			}
			
		</script>
	</body>

</html>